<template>
  <view class="cart_contanier" v-if="cart.length!==0">
    <!-- 地址区域 -->
    <myaddress></myaddress>
    <!-- 购物车标题区域 -->
    <view class="cart-title">
      <uni-icons type="shop" size="18"></uni-icons>
      <text>购物车</text>
    </view>
    <!-- 购物车列表区域 -->
    <uni-swipe-action>
      <block v-for="item in cart " :key="item.goods_id">
       <uni-swipe-action-item :right-options="options" @click="swiperHandler(item)">
         <mygoods :goods="item">
           <template #checkout>
             <radio @click="radioChange(item)" :checked="item.goods_state" color="#C00000" class="btn-check"></radio>
           </template>
           <template #number>
             			<uni-number-box @change="changeValue(item)"  v-model="item.goods_count"  :min="1"/>
           </template>
         </mygoods>
       </uni-swipe-action-item>
      </block>
    </uni-swipe-action>
    <mysettle></mysettle>
  </view>
  <!-- 空购物车 -->
  <view class="empty_box" v-else>
      <image class="empty_img" src="../../static/cart_empty@2x.png"></image>
      <text  class="tip_empty">空空如也~</text>
  </view>
</template>

<script>
import badgeMix  from '@/mixin/tabbar-badge.js';
import mygoods from '../../components/mygoods/mygoods.vue';
import {mapState,mapMutations} from 'vuex'
  export default {
    mixins:[badgeMix],
    computed:{
      ...mapState('cart',['cart'])
    },
    data() {
      return {
        options:[
          {
              text: '取消',
              style: {
                backgroundColor: '#007aff'
            }
          }
        //   {
        //     text: '确认',
        //     style: {
        //         backgroundColor: '#dd524d'
        //     }
        // }
      ]
      };
    },
    methods:{
      ...mapMutations('cart',['updateCart','updateCartCount','removeCartItem']),
      radioChange(item){
        // console.log(item);
        this.updateCart(item)
      },
      changeValue(item){
        // console.log(item);
        this.updateCartCount(item)
      },
      swiperHandler(goods){
        // console.log(goods);
        this.removeCartItem(goods.goods_id)
      },
    }
  }
</script>

<style lang="scss">
  .cart_contanier {
    padding-bottom: 50px;
  }
.cart-title {
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 14px;
    padding-left: 5px;
  border: 1px solid #efefef;
  text {
  margin-left: 5px;
  }
}
.empty_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150px;
  .empty_img{
    height: 90px;
    width: 90px;
  }
  .tip_empty {
    font-size: 12px;
    color: gray;
    margin-top: 15px;
  }
}
</style>
